<template>
  <div style="position:relative;height:600px;width:100%;">
    <div style="width:300px;height:600px;position:absolute;top:0px;left:0;">
      <el-scrollbar style="height:100%;">
        <div v-for="(item,key) in pMsgUserList" :key="key" class="useritem" style="height:50px;padding:10px 5px;overflow:hidden;"
          @click="showMsg(key)">
          <el-avatar :size="60" :src="item.avatar" style="float:left;"></el-avatar>
          <el-link type="info" :underline="false" style="padding:0 5px;vertical-align:top;line-height:35px;font-size:16px;">{{item.nickname}}
          </el-link>
          <el-link type="info" :underline="false" style="padding:0 5px;vertical-align:top;line-height:25px;">{{item.ctime}}</el-link>
          <el-tag v-if="item.notsee" style="float:right;margin-top:-20px;">{{item.notsee}}</el-tag>
        </div>
      </el-scrollbar>
    </div>
    <div style="border:1px solid #f4f5f7;position:absolute;top:0;right:0;width:calc(100% - 302px);height:598px;">
      <div style="padding:5px 5px;height:calc(100% - 110px)">
        <div style="padding:5px 0;text-align:center;height:30px;">{{nowUser}}</div>
        <div class="content" style="height:calc(100% - 42px);padding:0 10px;">
          <el-scrollbar style="height:100%;" id="test">
            <div class="sx-item" v-for="item in oneUserMsgList" :key="item.objid">
              <div v-if="item.type=='to'" class="rightD">
                <el-avatar :size="50" :src="userMsg.avatar" style="float:right;"></el-avatar>
                <p class="rightP">{{item.content}}</p>

              </div>
              <div v-else class="leftD">
                <el-avatar :size="50" :src="item.avatar" style="float:left;"></el-avatar>
                <p class="leftP">{{item.content}}</p>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div style="height:100px">
        <el-input type="textarea" v-model="tempMsg" :rows="4" placeholder="请输入" style="width:calc(100% - 70px);"></el-input>
        <el-button style="height:96px;float:right;" type="primary" plain @click="send">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import { getUserList, sendMsgToUser, readMsg } from "@/api/front/msg"
export default {
  data() {
    return {
      pMsgUserList: [],
      oneUserMsgList: [],
      nowUser: "请在左侧选择一个用户查看",
      toUser: "",
      tempMsg: ""
    }
  },
  created() {
    this.getUlist()
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType',
      userLegal: 'user/getUserIsLegal'
    })
  },
  methods: {
    ...mapMutations({
      setUserMsg: 'user/setUserMsg'
    }),
    getUlist() {
      getUserList({}, (res) => {
        if (res.code == 200) {
          this.pMsgUserList = [];
          this.pMsgUserList = res.data
        }
      })
    },
    showMsg(key) {
      Object.keys(this.pMsgUserList).forEach((k) => {
        if (k == key) {
          let temp = JSON.parse(JSON.stringify(this.pMsgUserList[key].msg))
          this.oneUserMsgList = temp.reverse();
          this.nowUser = this.pMsgUserList[key].nickname
          this.toUser = key
          this.$nextTick(() => {
            var ele = document.getElementsByClassName("el-scrollbar__wrap");
            ele[2].scrollTop = ele[2].scrollHeight;
          })
          readMsg({ objid: key }, (res) => {
            if (res.code == 200) {
              this.pMsgUserList[key].notsee = 0;
            }
          })
        }
      })
    },
    send() {
      if (this.tempMsg) {
        sendMsgToUser({ objid: this.toUser, content: this.tempMsg }, (res) => {
          if (res.code == 200) {
            this.tempMsg = "";
            this.oneUserMsgList.push(res.data)
            this.pMsgUserList[this.toUser].ctime = res.data.ctime
            this.$nextTick(() => {
              var ele = document.getElementsByClassName("el-scrollbar__wrap");
              ele[2].scrollTop = ele[2].scrollHeight;
            })
          }
        }, true)
      }
      else {
        this.$message("请输入内容")
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/ .content .el-scrollbar__wrap {
  background: white;
}
.useritem:hover {
  background: #eee;
}
.leftD {
  text-align: left;
  padding-right: 50px;
}
.rightD {
  text-align: right;
  padding-left: 50px;
}
.rightD,
.leftD {
  margin: 5px 0;
}
.rightD::before,
.leftD::before,
.rightD::after,
.leftD::after {
  content: "";
  display: block;
  clear: both;
}
.rightP,
.leftP {
  display: inline-block;
  vertical-align: top;
  border: 1px solid #f4f5f7;
  margin: 0 0;
  padding: 10px 15px;
  background: #f4f5f7;
  border-radius: 5px;
  margin-top: 3px;
  white-space: pre-wrap;
  max-width: calc(100% - 180px);
}
.rightP {
  margin-right: 10px;
}
.leftP {
  margin-left: 10px;
}
</style>